<template>
  <div class="user">
    <page-search :searchFormConfig="searchFormConfig" @resetClick="handleResetClick" @searchClick="handleSearchClick" />
    <page-content
      :contentTableConfig="contentTableConfig"
      pageName="users"
      ref="pageContentRef"
      @createData="handleCreateData"
      @editData="handleEditData"
    >
      <template #status="scope">
        <el-button size="small" :type="scope.row.enable ? 'success' : 'danger'">
          {{ scope.row.enable ? '启用' : '禁用' }}
        </el-button>
      </template>
    </page-content>
    <page-dialog ref="pageDialogRef" :dialogConfig="configComputed" :editInfo="editInfo" pageName="users" />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive } from 'vue'
import { useStore } from '@/store'

import pageSearch from '@/components/page-search'
import pageContent from '@/components/page-content'
import pageDialog from '@/components/page-dialog'

import { searchFormConfig } from './config/search-config'
import { contentTableConfig } from './config/content-config'
import { dialogConfig } from './config/dialog-config'

import { usePageSearch } from '@/hooks/use-page-search'
import { usePageDialog } from '@/hooks/use-page-dialog'

export default defineComponent({
  name: 'user',
  components: {
    pageSearch,
    pageContent,
    pageDialog
  },
  setup() {
    // 回调函数动态显示和隐藏密码框
    const config = reactive({ ...dialogConfig })
    const createCallBack = () => {
      config.formItems.forEach((item) => {
        if (item.field === 'password') {
          item.isHidden = false
        }
        return item
      })
    }
    const editCallBack = () => {
      config.formItems.forEach((item) => {
        if (item.field === 'password') {
          item.isHidden = true
        }
        return item
      })
    }

    // 调用hooks获取公共变量和函数
    const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch()
    const { pageDialogRef, handleCreateData, handleEditData, editInfo } = usePageDialog(createCallBack, editCallBack)

    // 动态获取部门和角色列表用作下拉列表
    const store = useStore()
    // 请求数据是异步的 所以用computed进行实时刷新
    const configComputed = computed(() => {
      config.formItems.forEach((item) => {
        if (item.field === 'departmentId') {
          item.options = store.state.entireDepartment.map((item) => {
            return { value: item.id, title: item.name }
          })
        }
      })
      config.formItems.forEach((item) => {
        if (item.field === 'roleId') {
          item.options = store.state.entireRole.map((item) => {
            return { value: item.id, title: item.name }
          })
        }
      })

      return config
    })

    return {
      pageContentRef,
      searchFormConfig,
      contentTableConfig,
      handleResetClick,
      handleSearchClick,
      configComputed,
      pageDialogRef,
      handleCreateData,
      handleEditData,
      editInfo
    }
  }
})
</script>

<style scoped lang="less"></style>
